<!DOCTYPE html>
<html lang="en">
<head>
    <title>范闲商城-转盘抽奖</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
<!--    <script src="http://www.tyfo.com/common/js/jquery-1.11.1.min.js"></script>-->
    <style>
        .draw-container {
            position: fixed;
            top: 50%;
            right: 270px;
            transform: translateY(-50%);
            width: 33.33%;
            padding: 20px;
            /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
            text-align: center;
        }

        .draw-container .line {
            margin: 10px 0;
            font-size: 16px;
        }

        .draw-container button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 20px 0; /* 更大的间距，确保按钮在两行文本之间 */
        }

        .draw-container button:hover {
            background-color: #45a049;
        }

        .inline-items {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p,
        body {
            margin: 0;
        }

        .rui-luck-draw {

            z-index: -1; /* 设置为负值，使其位于其他内容之下 */
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            right: 150px;
        }

        .rui-luck-content {
            height: 75vw;
            width: 75vw;
            max-width: 350px;
            max-height: 350px
        }

        .rui-luck-turntable,
        .rui-luck-pointer {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg);
            transform-origin: center center;
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
        }

        .rui-luck-name {
            font-size: 16px;
            text-align: left;
            height: 30px;
            line-height: 30px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
        }

        .rui-luck-name a {
            text-decoration: none;
            color: #777;
            padding: 0 20px;
        }

        .rui-luck-pointer {
            width: 27vw;
            height: 27vw;
            max-width: 110px;
            max-height: 110px
        }
        .avatar-img {
            width: 20px; /* 设置头像图片的宽度 */
            height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
            border-radius: 50%; /* 使图片呈现圆形 */
            margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 所有内容除了footer -->
        <div th:replace="header::top"></div>

        <div class="search_bar clearfix">
            <a href="/" class="logo fl"><img src="../static/pic/fanxian-mall.png" width="150px" height="60px"></a>
            <div class="search_con fl">
                <input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
                <input type="button" id="searchButton" class="input_btn fr" value="搜索">
            </div>
            <div class="guest_cart fr">
                <a href="/page/cart" id="cart" class="cart_name fl">我的购物车</a>
            </div>
        </div>

        <div class="navbar_con">
            <div class="navbar clearfix">
                <div class="subnav_con fl">
                    <h1>全部商品分类</h1>
                    <span></span>
                    <ul class="subnav" id="LAY_CategoryList">
                    </ul>
                </div>
                <ul class="navlist fl">
                    <li><a href="/">首页</a></li>
                    <li class="interval">|</li>
                    <li><a href="/page/list">全部商品</a></li>
                    <li class="interval">|</li>
                    <li><a href="/page/turntable">抽奖</a></li>
                </ul>
            </div>
        </div>



        <div class="list_model">
            <div class="rui-luck-draw">
                <div class="rui-luck-content">
                    <div class="rui-luck-box">
                        <img id="luckTurntable" src="/static/draw/images/turntable.png" alt="" class="rui-luck-content rui-luck-turntable">
                        <img id="luckPointer" onclick="startRotate(this)" src="/static/draw/images/pointer.png" class="rui-luck-pointer" />
                    </div>
                </div>
            </div>
        </div>
        <div class="draw-container">
            <div class="line inline-items">
                <span>您的次数为：</span>
                <span id="num">10</span>
            </div>
            <button onclick="startRotate(this)" id="drawing">点击抽奖</button>
            <div class="line inline-items">
                <span>您的奖品为：</span>
                <span id="draw"></span>
            </div>
            <a href="/page/user/coupon"><button style="background-color: #1e9fff">我的优惠券</button></a>
        </div>

    </div>

    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
        <p>电话：010-8888888    京ICP备88888888号</p>
    </div>


    <script src="/static/draw/luckDraw.js"></script>
    <script>
        $('#searchButton').click(function() {
            var searchText = $('#searchInput').val(); // 获取搜索框中的值
            var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
            window.location.href = searchUrl; // 跳转到另一个页面
        });
        // 转盘旋转，从左向右逆时针计算奖品
        var luckArr = ['100减99优惠券', '谢谢参与', '39减10优惠券', '谢谢参与', '59减15优惠券', '谢谢参与'];
        var luck = new LuckDraw();
        var startRotate = function (elem) {
            luck._init({
                rotateId: '#luckTurntable',
                luckNumber: Math.floor(Math.random() * (5 - 0) + 0),
                typeNumber: 6,
                time: 2000,
                type: 'turntable',
                circleNumber: 10,
                success: function (res) {
                    console.log(res.luckNumber);
                    console.log(luckArr[res.luckNumber]);
                    //alert(luckArr[res.luckNumber]);
                    $('#draw').text(luckArr[res.luckNumber]);
                    if (luckArr[res.luckNumber] !== "谢谢参与") {
                        $.post(
                            '/coupon/addCoupon',
                            {'couponName': luckArr[res.luckNumber]},
                            function (result) {
                                if (result.code == 0) {

                                }
                            },
                            'json'
                        );
                    }

                }
            });
        };

        /*$.post(
            '/draw/drawNumber',
            function (result) {
                if (result.code == 0) {
                    $('#num').text(result.data.drawNumber);
                    if (result.data.drawNumber <= 0) {
                        $('#drawing').prop('disabled', true); // 禁用抽奖按钮
                        $('#drawing').css('background-color', '#ccc'); // 改变按钮样式以表示禁用
                    } else {
                        $('#drawing').prop('disabled', false); // 启用抽奖按钮
                        $('#drawing').css('background-color', '#4CAF50'); // 恢复按钮原样式
                    }
                }
            },
            'json'
        );*/

        $("#drawing").click(function () {
            $.post(
                '/draw/reduceDrawNumber',
                function (result) {
                    if (result.code == 0) {
                        //mylayer.okMsg(result.msg);
                        checkDrawNum();
                    } else {
                        //mylayer.errorMsg(result.msg);
                    }
                },
                'json'
            );
        });

        $(document).ready(function() {
            // 页面加载完成后调用checkDrawNum函数
            checkDrawNum();
        });

        function checkDrawNum() {
            $.post(
                '/draw/drawNumber',
                function (result) {
                    if (result.code == 0) {

                        if (result.data == null) {
                            $('#num').text('0，请先下单！');
                            $('#drawing').prop('disabled', true); // 禁用抽奖按钮
                            $('#drawing').css('background-color', '#ccc'); // 改变按钮样式以表示禁用
                        } else {
                            if (result.data.drawNumber <= 0) {
                                $('#num').text(result.data.drawNumber + '，请先下单！');
                                $('#drawing').prop('disabled', true); // 禁用抽奖按钮
                                $('#drawing').css('background-color', '#ccc'); // 改变按钮样式以表示禁用
                            } else {
                                $('#num').text(result.data.drawNumber);
                                $('#drawing').prop('disabled', false); // 启用抽奖按钮
                                $('#drawing').css('background-color', '#4CAF50'); // 恢复按钮原样式
                            }
                        }

                    }
                },
                'json'
            );
        };


        $.post(
            '/category/listAll',
            function (result) {
                if (result.code == 0) {
                    $('#LAY_CategoryList').empty();
                    $(result.data).each(function () {
                        $('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
                    })
                }
            },
            'json'
        );
        function logout() {
            layer.confirm(
                '您确认要退出么',
                {icon:3},
                function() {
                    $.post(
                        '/user/logout',
                        function (result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                setTimeout(function() {
                                    window.location.reload();
                                }, 800);
                            }
                        },
                        'json'
                    );
                    // location.href = '/admin?method=logout'
                }
            );
        }
    </script>
</body>

</html>